<template>
    <div class="container">
        <div class="search-box">
            <div class="search-wrap">
                <div class="icon-wrap">
                <van-icon name="search" />
                </div>
                <input ref="oInput" v-model.trim="inputValue" class="input-wrap" type="text" placeholder="请输入">
                <div class="search-btn" @click="handleSearch">搜索</div>
            </div>
        </div>
        <div class="shaix"> 
            <van-field
            v-model="professionValue"
            is-link
            readonly
            label="按行业筛选:"
            @click="showPicker1 = true"
            />
            <van-popup v-model:show="showPicker1" round position="bottom">
              <van-picker
              :columns="professionList"
              @cancel="showPicker1 = false"
              @confirm="onConfirm1"
              />
            </van-popup>

            <van-field
            v-model="regionValue"
            is-link
            readonly
            label="按地区筛选:"
            @click="showPicker2 = true"
            />
            <van-popup v-model:show="showPicker2" round position="bottom" class="popup-region" :close-on-click-overlay="false">
              <div class="popregion">
                <div class="pop-title">
                  <span class="quxiao" @click="handleCancel">取消</span>
                  <span class="region-title">请选择地区</span>
                  <span class="queren" @click="handleComform">确认</span>
                </div>
                <van-tree-select
                v-model:active-id="activeId"
                v-model:main-active-index="activeIndex"
                :items="items"
                @click-nav = "onClickNav"
                @click-item = "onClickItem"
                />
              </div>
              
          </van-popup>
        </div>
        <div class="tab1" v-for="(item, index) of companyList" :key="index" @click="jump({ path: '/CompanyDetail', query: { companyId: item.companyId } })">
            <!-- <img class="logo" src="@/assets/images/logo.png" alt=""> -->
            <div class="company-logo">{{ removeAndSubstring(item.companyName) }}</div>
            <div class="company">
                <div class="p1">{{ item.companyName }}</div>
                <div class="p2">
                    <span class="kaiye" v-if="item.companyStatus">{{item.companyStatus}}</span>
                    <span class="guoqi" v-if="item.companyType">{{item.companyType}}</span>
                </div>
                <div class="info-item">
                    <span class="item-name">法定代表人：</span>
                    <span class="item-content">{{item.legalPerson}}</span>
                </div>
                <div class="info-item">
                    <span class="item-name">成立时间：</span>
                    <span class="item-content">{{item.startDate}}</span>
                </div>
                <div class="info-item">
                    <span class="item-name">注册资本：</span>
                    <span class="item-content">{{item.registeredCapital}}</span>
                </div>
                <div class="info-item">
                    <span class="item-name">联系电话：</span>
                    <span class="item-content">{{item.phone1}}</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>

import { ref, watch, toRefs, onMounted } from 'vue';
import { getCompanyList,getTalentList,getDictSelect,getTalentRegion } from '@/api/company.js';
import { useRouter,useRoute } from 'vue-router';

const items = ref([])
const getRegion = async () => {
  const { code, data } = await getTalentRegion();
  if (code === 200) {
    const newKeys = { fullName: 'text' };
    renameKeys(data[0].children, newKeys);
    console.log('data[0].children',data[0].children);
    items.value = data[0].children
  }
}
function renameKeys(obj, newKeys) {
    if (typeof obj !== 'object' || obj === null) return;
    if (Array.isArray(obj)) {
        obj.forEach((item, index) => {
        renameKeys(obj[index], newKeys);
        });
        return;
    }
    Object.keys(obj).forEach(key => {
        const newKey = newKeys[key] || key;
        if (obj[key] && typeof obj[key] === 'object') {
        renameKeys(obj[key], newKeys);
        }
        if (newKey !== key) {
        obj[newKey] = obj[key];
        delete obj[key];
        }
    });
}
const activeId = ref(null);
const activeIndex = ref(null);
const showPicker2 = ref(false);
const cityId = ref('1')
const districtId = ref('101')
const regionValue = ref('')
const onClickNav = (value) => {
  districtId.value = ref('101')
  regionValue.value = ref('海陵区')
  console.log('ClickNav-value:',value);
  if(value == 0){
    districtId.value = '101'
    regionValue.value = '海陵区'
  }else if(value == 1){
    districtId.value = '102'
    regionValue.value = '医药高新区（高港区）'
  }else if(value == 2){
    districtId.value = '103'
    regionValue.value = '姜堰区'
  }else if(value == 3){
    districtId.value = '104'
    regionValue.value = '兴化市'
  }else if(value == 4){
    districtId.value = '105'
    regionValue.value = '靖江市'
  }else if(value == 5){
    districtId.value = '106'
    regionValue.value = '泰兴市'
  }else if(value == 6){
    districtId.value = '107'
    regionValue.value = '市直'
  }
};

const townId = ref('')
const onClickItem = (value) => {
  console.log('ClickItem-value:',value.id);
  console.log('ClickItem:',value);
  townId.value = value.id
  regionValue.value = value.text
};

const handleCancel = () =>{
  showPicker2.value = false
}

const handleComform = () => {
  showPicker2.value = false
  getCompany()
  districtId.value = ''
  townId.value = ''
}

const companyList = ref({})
const getCompany = async () => {
  const { code, data } = await getCompanyList({
    currentPage: 1,
    pageSize: 20,
    companyName: inputValue.value,
    companyIndustry: professionId.value,
    city: cityId.value,
    district: districtId.value,
    town: townId.value
  });
  if (code === 200) {
    companyList.value = data.list
  }
}

const inputValue = ref('')
const handleSearch = ()=>{
    getCompany()
}

const professionList = [];
const getProfessionList = () => {
getDictSelect('talent_company_profession').then(res => {
  const {code,data} = res
  if(code === 200){
      data.forEach(item=>{
        professionList.push({
        text: item.fullName,
        value: item.enCode
      })
    })
  }
})
}
const showPicker1 = ref(false);
const professionId = ref('')
const professionValue = ref('')
const onConfirm1 = ({ selectedOptions }) => {
  showPicker1.value = false;
  professionValue.value = selectedOptions[0]?.text;
  professionId.value = selectedOptions[0]?.value;
  console.log('professionId.value:',professionId.value);
  getCompany()
};

const router = new useRouter();
const jump = (options) => {
  router.push(options);
}

//公司logo截取名称
function removeAndSubstring(str) {
  const result = str.replace(new RegExp('^.*?' + '市', ''), '');
  return result.substring(0, 4);
}

onMounted(() => {
    getCompany()
    getProfessionList()
    getRegion()
})
</script>

<style lang="scss" scoped>
.tab1{
    padding: 1.2rem;
    background: #fff;
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    margin: 1.2rem;
}

.company-logo{
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
    border-radius: 5px;
    background: #5693FC;
    font-size: 1.6rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
}
.p1{
    font-size: 1.8rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0.8rem;
}
.p2{
    margin-bottom: 1.2rem;

    .kaiye{
        font-size: 1.2rem;
        font-weight: 400;
        color: #1EA872;
        width: 4.1rem;
        height: 2rem;
        line-height: 2rem;
        border-radius: 0.2rem;
        background: #EBF7EC;
        display: inline-block;
        text-align: center;
        margin-right: 0.8rem;
    }
    .guoqi{
        font-size: 1.2rem;
        font-weight: 400;
        color: #2A82E4;
        width: 6.4rem;
        height: 2rem;
        line-height: 2rem;
        border-radius: 0.2rem;
        background: rgba(42, 130, 228, 0.2);
        display: inline-block;
        text-align: center;
        margin-right: 0.8rem;
    }
}

.info-item{
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 0.7rem;

    .item-name{
        color: #999999;
    }
    .item-content{
        color: #000000;
    }
}
.search-box{
    padding: 1.2rem 1.2rem 0;
    background: #fff;
}

.search-wrap {
  display: flex;
  align-items: center;
  position: relative;
  height: 3.6rem;
  padding: 0 1rem;
  background: #fff;
  box-sizing: border-box;
  border-radius: 1.8rem;
  font-size: 1.4rem;
  color: #777;
  overflow: hidden;
  background: #F5F7FB;

  .icon-wrap {
    position: absolute;
    left: 1rem;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .input-wrap {
    width: 100%;
    height: 100%;
    text-indent: 2rem;
    box-sizing: border-box;
    background: #F5F7FB;
  } 

  .search-btn {
    position: absolute;
    right: 1rem;
    padding: 0 1rem;
    border-left: .1rem solid #ccc;
  }
}
.shaix{
    padding-top: 1rem;
    background: #fff;
}
::v-deep .van-cell__right-icon{
  margin-left: 0!important;
  background: transparent;
  transform: rotate(90deg);
}
::v-deep .van-popup{
  background: #fff!important;
}

.popup-region{
  background: #fff;
}
.popregion{
  font-size: 1.6rem;
  padding: 1rem 1.4rem;
  margin-bottom: 1rem;

  .pop-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;

    .region-title{
      font-weight: 700;
    }
    .quxiao{
      color: #666;
    }
    .queren{
      color: #1989fa;
    }
  }
}

</style>